import React, { Component } from 'react'
import Logo from '../logo.svg'
import '../App.css';
import CommentAdd from './comment-add'
import CommentList from './comment-list'

export default class App extends Component {
  /*constructor(props){
    super(props)
    this.state = {
      comments: [
        {
          name:'sf',
          content: 'Good'
        }
      ]
    }
  }*/
  /**
   * 状态
   */
  state = {
    comments: [
      {
        name:'sf',
        content: 'Good'
      },
      {
        name:'sf2',
        content: 'Good'
      }
    ]
  }

  addComment=(comment)=>{
    const {comments} = this.state
    comments.unshift(comment)
    this.setState({comments})
  }

  deleteComment=(index)=>{
    const {comments} = this.state
    comments.splice(index,1)
    this.setState({comments})
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
            <img src={Logo} className="App-logo"  alt='Logo'/>
            <h1>发表评论</h1>
        </header>
        <div className="comment-content">
          <CommentAdd addComment={this.addComment}/>
          <CommentList deleteComment={this.deleteComment} comments={this.state.comments}/>
        </div>
      </div>
    )
  }
}
